import React from "react";
import {
  Avatar,
  List,
  Text,
  Box,
  Page,
  Button,
  Icon,
  useNavigate,
  Header,
} from "zmp-ui";
import { useRecoilValue } from "recoil";
import { displayNameState, userState } from "state";
import styles from "./styles.module.scss";
const MyPage = () => {
  const { userInfo: user } = useRecoilValue(userState);
  const displayName = useRecoilValue(displayNameState);
  const navigate = useNavigate();
  return (
    <Page className="relative flex-1 flex flex-col">
      <Header
        showBackIcon={false}
        backgroundColor="transparent"
        className="app-header no-border pl-4 flex-none pb-[6px]"
      />
      {/* 未登录 */}
      <Box>
        <div className="px-5 pt-11">
          <div className="text-2xl pb-2">欢迎新朋友！ </div>
          <div className="text-xs pb-5 text-gray-1">更多优惠惊喜等着您！</div>
          <Button size="small">登录</Button>
        </div>
      </Box>
      {/* banner 广告 */}
      <Box>
        <div className="px-4">
          <img
            className={`w-full ${styles["banner-img"]}`}
            src="https://fastly.picsum.photos/id/527/375/100.jpg?hmac=MivEKiYdqsiTeYRUMZqRgeP0lQDIU7_ZztSh2MVir9g"
          />
        </div>
      </Box>
      <Box>
        <div className="section-container bg-white mx-4 mt-3 rounded-xl">
          <div className={styles["menu-list"]}>
            <div className={styles["menu-item"]}>
              <img src="" alt="" className={styles["menu-icon"]} />
              <Text className="flex-1">优惠券</Text>
              <Icon icon="zi-chevron-right" style={{ color: "#BBBBBB" }} />
            </div>
            <div className={styles["menu-item"]}>
              <img src="" alt="" className={styles["menu-icon"]} />
              <Text className="flex-1">完善资料</Text>
              <Icon icon="zi-chevron-right" style={{ color: "#BBBBBB" }} />
            </div>
            <div className={styles["menu-item"]}>
              <img src="" alt="" className={styles["menu-icon"]} />
              <Text className="flex-1">协议及政策</Text>
              <Icon icon="zi-chevron-right" style={{ color: "#BBBBBB" }} />
            </div>
          </div>
        </div>
      </Box>
    </Page>
  );
};

export default MyPage;
